<template>
  <div class="content_card">
    <UHeader>
      <template slot="left">
        <el-select v-model="sysMode" size="small" >
          <el-option
            v-for="item in sysModels"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </template>
      <!--<div slot="right">-->
      <!--<el-button type="success" size="mini" @click="showDialog=true">添加</el-button>-->
      <!--</div>-->
    </UHeader>
    <UDragTreeTable :data="treeData" />
    <el-dialog :visible.sync="showDialog" :append-to-body="true" :close-on-click-modal="false" width="400px" title="编辑菜单">
      <el-form ref="form" :model="menuFrom" style="padding: 0px 20px 0px 20px" label-width="80px" label-position="right" size="small">
        <el-form-item label="菜单名称">
          <el-input v-model="menuFrom.title" placeholder="请输入菜单名称"/>
        </el-form-item>
        <el-form-item label="路径">
          <el-input v-model="menuFrom.url" placeholder="请输菜单路径" disabled/>
        </el-form-item>
        <el-form-item label="图标" prop="loginPwd" >
          <MenuIcon :icon.sync="menuFrom.icon"/>
        </el-form-item>
        <el-form-item label="系统平台" prop="loginPwd" >
          <el-select v-model="menuFrom.sysmodel" size="small" style="width: 100%" disabled >
            <el-option
              v-for="item in sysModels"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>

        <el-form-item label="描述" >
          <el-input v-model="menuFrom.describes" :rows="2" type="textarea" placeholder="菜单描述"/>
        </el-form-item>
        <RolesSelect/>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="width: 98%" @click="save">保存</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import UDragTreeTable from '@/components/UDragTreeTable'
import UHeader from '@/components/UHeader'
import { getMenu, editMenu } from '@/api/user'
import MenuIcon from './components/MenuIcon'
export default {
  components: {
    UDragTreeTable, UHeader, MenuIcon
  },
  data() {
    return {
      showDialog: false,
      sysMode: 'ADMIN',
      menuFrom: { sysmodel: 'ADMIN' },
      sysModels: [{ value: 'ADMIN', label: '平台' }, { value: 'CYS', label: '承认商' }, { value: 'USER', label: '货主' }],
      treeData: {
        lists: [],
        columns: [
          { type: 'selection', title: '菜单名称', field: 'title', align: 'left', formatter: (item) => { return '<a>' + item.title + '</a>' } },
          { title: '链接', field: 'url', align: 'center' },
          { title: '图标', field: 'icon', align: 'center', formatter: (item) => { return '<span class="iconfont ' + item.icon + '"></span>' } },
          { title: '描述', field: 'describes', align: 'center' },
          { title: '创建时间', field: 'createTime', align: 'center' },
          { title: '创建人', field: 'createBy', align: 'center' },
          { title: '操作', type: 'action', width: 350, align: 'center', actions: [
            { text: '编辑', onclick: this.onEdit, formatter: (item) => { return '<i>编辑</i>' } }
          ]
          }
        ]
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      getMenu('admin').then(res => {
        this.treeData.lists = res.map(r => {
          r.open = false
          return r
        })
      })
    },
    save() {
      editMenu(this.menuFrom).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.loadData()
      })
    },
    onEdit(menu) {
      this.menuFrom.id = menu.id
      this.menuFrom.parentId = menu.parentId
      this.menuFrom.sysmodel = menu.sysmodel
      this.menuFrom.title = menu.title
      this.menuFrom.icon = menu.icon
      this.menuFrom.describes = menu.describes
      this.menuFrom.url = menu.url
      this.showDialog = true
    }
  }
}
</script>

<style scoped>

</style>
